<template>
	<view class="timeSwiper">
		<scroll-view scroll-x="true" :scroll-left="scrollLeft" :scroll-with-animation="true">
			<view class="timesBox">
				<view class="tabItem" v-for="(item,index) in timesList" :key="index" @click="tabChange(index,item)"
					:class="{ac:tabCurrent == index}">
					<view class="small_font">{{ item.date }}</view>
					<view class="middle_font" style="margin: 10rpx 0;">{{ item.week }}</view>
				</view>
			</view>
		</scroll-view>
		<view class="flex fjb">
			<view class="flex fcenter tabAmorPm" v-for="(item, index) in amOrPmtab" :key="index" 
			:class="{tabAmorPmAc:istabAmorPm == index}" @click="changeAmorPm(item, index)">
				{{ item }}
			</view>
		</view>
	</view>
</template>

<script>
	// import {
	// 	listByMonth
	// } from "@/common/API/order.js"
	import {
		getWeek,
		getYM,
		initDate
	} from "@/utils/filter.js"
	export default {
		// props: {
		// 	isActive: {
		// 		type: Boolean,
		// 		default: true
		// 	},
		// 	sendMonth: {
		// 		type: String,
		// 		default: ''
		// 	}
		// },
		data() {
			return {
				amOrPmtab: ["上午", "下午"],
				timesList: [],
				istabAmorPm: 0,
				itemWidth: 0, // 每个item的宽度
				scrollLeft: 0, // 滑动距离
				tabCurrent: 0, // 默认当前月份
				selectDate: '',
				selectTab: '上午',
				// percent: 0,
			}
		},
		created() {
			this.getDates()
		},
		// watch: {
		// 	sendMonth() {
		// 		this.selectDate = this.sendMonth
		// 	}
		// },
		// mounted() {
		// 	let that = this
		// 	this.$nextTick(() => {
		// 		setTimeout(() => {
		// 			if (that.timesList.length) {
		// 				that.tabCurrent = that.timesList.findIndex(item => item.date == that.selectDate)
		// 				const query = uni.createSelectorQuery().in(that);
		// 				query.select('.tabItem').boundingClientRect(data => {
		// 					// item宽度 = 自身宽度 + 8px右边距
		// 					that.itemWidth = data.width + 8;
		// 					that.scrollLeft = that.itemWidth * (that.tabCurrent - 1);
		// 				}).exec();
		// 			}
		// 		}, 500)
		// 	})
		// },
		methods: {
			// 初始化时间
			getDates() {
				let dateList = initDate()
				dateList.forEach(item => {
					this.timesList.push({
						week: getWeek(item.date),
						date: item.date,
						specificDate: item.specificDate
					})
				})
				// 时间默认第一项
				this.selectDate = dateList[0].specificDate
			},
			// 点击tab切换高亮，并进行滑动，（index-1）是为了点击项显示在第二栏的位置
			tabChange(index, item) {
				// if (item.canReservationNumb != 0 && this.isActive) {
					this.tabCurrent = index;
					this.selectDate = this.timesList[index].specificDate
					this.scrollLeft = this.itemWidth * (index - 1);
					this.$emit('tabChange', this.selectDate)
				// }
			},
			changeAmorPm(item, index) {
				this.istabAmorPm = index
				this.selectTab = item
			}
		}
	}
</script>

<style scoped lang="scss">
	.pro_bar {
		width: 150rpx;
		margin: 20rpx auto;
	}

	.timeSwiper {

		/* 隐藏滚动条样式 */
		::-webkit-scrollbar {
			width: 0;
			height: 0;
		}
		.timesBox {
			width: 1400rpx;
			display: flex;
			align-items: center;

			.tabItem {
				background: #F8F8F8;
				padding: 20rpx 10rpx;
				flex-shrink: 0;
				text-align: center;
				width: 80rpx;
				height: 80rpx;
				color: #333;
				font-size: 28rpx;
				margin-right: 8px;
				border-radius: 30rpx;
			}

			.ac {
				background: #F1FDFF;
				border: 2rpx solid #00B4C7;
				font-size: 28rpx;
				color: #00B4C7 !important;
			}

			.dis {
				color: #999;
			}
		}
	}
	.tabAmorPm{
		background: #F8F8F8;
		font-size: 28rpx;
		color: #333;
		flex: 1;
		margin: 30rpx 20rpx;
		padding: 16rpx;
		border-radius: 20rpx;
	}
	.tabAmorPmAc{
		border: 2rpx solid #00B4C7;
		background: #F1FDFF;
		font-size: 28rpx;
		color: #00B4C7 !important;
	}
</style>